<template>
  <div style="padding-bottom: 18px">
    <a-card style="border-radius: 10px;width: 300px;box-shadow:4px 4px 8px #d3d2d2" :bordered="false">

      <a-card-meta>
        <template #avatar>
          <div style="text-align: center;
                    width: 250px">
            <div>
              <a-avatar :src="store.getters.getAvatar"
                        :size="100"/>
            </div>
            <div style="margin: 10px 0">
              {{ store.getters.getSignature }}
            </div>

            <div  style="margin: 30px 0 20px">
              <a-row>
                <a-col :span="8">
                  <a-statistic title="文章" :value="allCount.essayCount" valueStyle="font-size:20px"/>
                </a-col>
                <a-col :span="8">
                  <a-statistic title="标签" :value="allCount.labelCount" valueStyle="font-size:20px"/>
                </a-col>
                <a-col :span="8">
                  <a-statistic title="类别" :value="allCount.categoryCount" valueStyle="font-size:20px"/>
                </a-col>
              </a-row>
            </div>
            <div style="margin: 10px 10px 10px">
              <a-button type="primary" block @click="()=>{router.push('/resume')}">个人简历</a-button>
            </div>

          </div>

        </template>
      </a-card-meta>
    </a-card>
  </div>

  <div style="padding-bottom: 18px">
    <a-card  style="border-radius: 10px;width: 300px;box-shadow:4px 4px 8px #d3d2d2" :bordered="false">
      <template #title>
        <div style="font-size: 18px;color: #535353">
          <folder-open-filled />&nbsp;&nbsp;分类
        </div>
      </template>
      <div v-for="(item,index) in categoryAndCount" :key="index" style="margin: -15px -15px 14px" >
        <a-button type="text" block @click="handleClickCategory(item.category)">
        <span style="float: left;color: #666666">{{ item.category }}</span>
        <span style="float: right;color: #666666">{{ item.count }}</span></a-button>
      </div>
    </a-card>
  </div>

  <div style="padding-bottom: 18px">
    <a-card style="border-radius: 10px;width: 300px;box-shadow:4px 4px 8px #d3d2d2" :bordered="false">
      <template #title>
        <div style="font-size: 18px;color: #535353">
          <tags-filled />&nbsp;&nbsp;标签
        </div>
      </template>
      <span v-for="(item,index) in labelSet" :key="index" style="font-size: 20px;gap: 5px;" >
        <el-tag checked style="cursor: pointer"
                @click="handleClickTag(item.label)"
                :size="sizeByNumber(Number(item.count))"
                :color="item.label === 'loser' ? 'volcano' : item.count > 1 ? 'rgba(244,120,120,0.26)' :'rgb(241,241,241)' ">
          <span style="font-size: 14px;">{{item.label}}</span>&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;{{item.count}}
        </el-tag>
        &nbsp;&nbsp;
      </span>
    </a-card>
  </div>

  <div style="padding-bottom: 18px">
    <a-card style="border-radius: 10px;width: 300px;box-shadow:4px 4px 8px #d3d2d2" :bordered="false">
      <template #title>
        <div style="font-size: 18px;color: #535353">
          <calendar-filled />&nbsp;&nbsp;时间轴
        </div>
      </template>

      <div v-for="(item,index) in dateList" :key="index" style="margin: -15px -15px 14px" >
        <a-button type="text" block @click="handleDateList(item.date,item.count)">
          <span style="float: left;color: #666666">{{ item.date }}</span>
          <span style="float: right;color: #666666">{{ item.count }}</span></a-button>
      </div>

    </a-card>
  </div>


    <div style="position: sticky;top:80px" v-if="directory">
      <a-card style="border-radius: 10px;width: 300px;box-shadow:4px 4px 8px #d3d2d2" :bordered="false">
        <template #title>
          <div style="font-size: 18px;color: #535353">
            <unordered-list-outlined />&nbsp;&nbsp;目录
          </div>
        </template>
        <div
            v-for="(anchor,index) in directoryContent"
            :key="index"
            :style="{ padding: `2px 0 2px ${anchor.indent * 20}px` }"
            @click="handleAnchorClick(anchor)"
        >
          <a-button  type="text" >
            <a style="cursor: pointer">{{ anchor.title }}</a>
          </a-button>

        </div>
      </a-card>
    </div>


</template>

<script setup>
import {FolderOpenFilled,TagsFilled,CalendarFilled,UnorderedListOutlined}from '@ant-design/icons-vue';
import {useStore} from "vuex";
import {useRoute, useRouter} from "vue-router";
import {ref,watchEffect} from "vue";

const store = useStore()
const router=useRouter()
const route=useRoute()
const allCount=ref()
const categoryAndCount=ref([])
const labelSet=ref([])
const countSum=ref(0)
const countAvg=ref(0)
const dateList=ref([])
const directory=ref(false)
const directoryContent=ref([])
const preview=ref()

function sizeByNumber(n) {
  if (n>countAvg.value){
    return "large"
  }else if (n>1){
    return "default"
  }else
    return "small"
}

function toUp() {
  const timer = setInterval(function () {
    let osTop = document.documentElement.scrollTop || document.body.scrollTop;
    let ispeed = Math.floor(-osTop / 5);
    document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
    this.isTop = true;
    if (osTop === 0) {
      clearInterval(timer);
    }
  }, 10);
}

const handleClickTag = (label) => {
  toUp()
  router.push("/visitor/getList/label/by/"+label)
}

const handleClickCategory = (category) => {
  toUp()
  router.push("/visitor/getList/category/by/"+category)
}

watchEffect(()=>{
  preview.value=store.getters.getPreviewRef
  directoryContent.value=store.getters.getDirectoryContent
  directory.value=store.getters.getDirectory;
  allCount.value=store.getters.getAllCount
  labelSet.value=store.getters.getLabelSet
  dateList.value=store.getters.getDateList
  categoryAndCount.value=store.getters.getCategoryList
  labelSet.value.forEach((ivalue)=>{
    countSum.value+=Number(ivalue.count)
  })
  countAvg.value=countSum.value/labelSet.value.length
  console.log("countSum  :",countSum.value,"countAvg  :",countAvg.value)
})

const handleDateList = (date,count) => {
  toUp()
  router.push("/visitor/timeline/"+date+"/"+count)
}

function handleAnchorClick(anchor) {
  // const preview = this.$refs;
  const {lineIndex} = anchor;

  const heading = preview.value.$el.querySelector(`[data-v-md-line="${lineIndex}"]`);


  if (heading) {
    console.log(heading)

    let timer = setInterval(() => {
      if (document.documentElement.scrollTop<heading.offsetTop){
        document.documentElement.scrollTop+=20
        window.pageYOffset+=20
        document.body.scrollTop+=20
      }else if (document.documentElement.scrollTop>heading.offsetTop){
        document.documentElement.scrollTop-=20
        window.pageYOffset-=20
        document.body.scrollTop-=20
      }else {
        document.documentElement.scrollTop=heading.offsetTop
        window.pageYOffset=heading.offsetTop
        document.body.scrollTop=heading.offsetTop
      }

      // console.log(document.documentElement.scrollTop,"  ",heading.offsetTop)
      if (Math.abs(document.documentElement.scrollTop-heading.offsetTop)<=20) {
        clearInterval(timer)
      }else if(document.documentElement.clientHeight+document.documentElement.scrollTop>=document.documentElement.scrollHeight){
        clearInterval(timer)
      }
      // console.log(document.documentElement.clientHeight)
      // console.log(document.documentElement.scrollTop)
      // console.log(document.documentElement.scrollHeight)
    }, 5);

  }
}
</script>

<style scoped>

</style>